<template>
  <div>
    <el-card>
      <div class="dingbu">
        <p>
          <!-- 姓名:<el-input v-model="inp" placeholder="请输入内容" ></el-input> -->
          姓名:<el-input v-model="inp" placeholder="请输入内容" @input="search" />
          公司名称:<el-input v-model="input" placeholder="请输入内容" @input="search" />
          审核状态:<el-select v-model="status" placeholder="请选择" @change="change">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :selected="item.label=='通过' ? true : false"
          />
        </el-select>

          <!-- <el-button icon="el-icon-search" @click="search" circle></el-button> -->
        </p>
        <p>
          <!-- <el-button type="warning" icon="el-icon-warning-outline" class="tian" @click="weitong">审核未通过信息</el-button> -->
          <el-button type="primary" class="ti" icon="el-icon-circle-plus-outline" @click="add">提交预约信息</el-button>
        </p>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          label="姓名"
          prop="name"
        />
        <el-table-column
          label="公司名称"
          prop="company"
        />
        <el-table-column
          label="公司地址"
          prop="city"
        />
        <el-table-column
          label="面试方式"
          prop="way"
        />
        <el-table-column
          label="面试进度"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.progress==0 ">还未面试</span>
            <span v-else>面试结束</span>
          </template>
        </el-table-column>
        <el-table-column
          label="面试时间"
        >
          <template slot-scope="scope">
            {{ scope.row.time|moment("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">审核通过</span>
            <span v-if="scope.row.status==0">未审核</span>
            <div v-if="scope.row.status==2">
              <span>审核未通过</span>
              <p class="red">{{ scope.row.reason }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="upd(scope.row)"><a class="blue">编辑</a></el-button>
            <el-button @click="del(scope.row)"><a class="red">删除</a></el-button>
            <!-- <el-button v-else disabled @click="del(scope.row)"><a class="qred">删除</a></el-button>          -->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="t"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="提交预约信息" :visible.sync="dlogFormVisible" width="30%">
      <el-form :model="form1" ref="ruleForm" :rules="rules">
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="form1.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面试公司" prop="company">
          <el-input v-model="form1.company" autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司地址" prop="city">
          <el-input v-model="form1.city" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面试方式" prop="way">
          <el-select v-model="form1.way" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试时间" prop="time" >
          <div class="block">
            <el-date-picker
              v-model="form1.time"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dlogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addsave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改预约信息" :visible.sync="updlogFormVisible" width="30%">
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item label="学生姓名" prop="name"> 
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面试公司" prop="company">
          <el-input v-model="form.company" autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司地址" prop="city">
          <el-input v-model="form.city" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面试方式" prop="way">
          <el-select v-model="form.way" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试进度" prop="way">
          <el-select v-model="form.progress" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试时间" prop="time">
          <div class="block">
            <el-date-picker
              v-model="form.time"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updlogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updsave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      inp: '',
      input: '',
      tableData: [],
      size: 5,
      page: 1,
      t: 0,
      pageisornot: false,
      updlogFormVisible: false,
      dlogFormVisible:false,
      form1: {
        name: '',
        company: '',
        city: '',
        way: '',
        time: ''
      },
      form: {
        id: '',
        name: '',
        company: '',
        city: '',
        way: '',
        time: '',
        progress:''
      },
      options: [{
        value: '公司面试',
        label: '公司面试'
      }, {
        value: '电话面试',
        label: '电话面试'
      }, {
        value: '视频面试',
        label: '视频面试'
      }],
      status:'',
      options1: [{
        value: 1,
        label: '通过'
      }, {
        value: 2,
        label: '未通过'
      }],
      options2: [{
        value: 0,
        label: '还未面试'
      }, {
        value: 1,
        label: '面试结束'
      }],
      role: '',
      rules: {
        name: [
          { required: true, message: '请选择姓名', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入公司地址', trigger: 'blur' }
        ],
        way: [
          { required: true, message: '请输入面试方式', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请输入面试时间', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getmian()
    // this.role=sessionStorage.getItem("user")
  },
  mounted() {},
  methods: {
    async getmian() {
      this.pageisornot = false
      var res = await this.http.get('/replay/replay', {
        params: {
          status:1,
          page: this.page,
          size: this.size
        }
      })
      console.log(res)
      if (res.status === 200) {
        this.tableData = res.data.data
        this.t = res.data.count
      }
    },
    handleSizeChange(v) {
      this.size = v
      if (this.pageisornot) {
        this.search()
      } else {
        this.getmian()
      }
    },
    handleCurrentChange(v) {
      this.page = v
      if (this.pageisornot) {
        this.search()
      } else {
        this.getmian()
      }
    },
    add() {
      // this.$router.push('/mianadd')
      this.dlogFormVisible=true
    },
    async search() {
      if (!this.pageisornot) {
        this.page = 1
      }
      if (this.input !== '' || this.inp !== '') {
        var res = await this.http.get('/replay/replay', {
          params: {
            company: this.input,
            name: this.inp
          }
        })
        if (res.status === 200) {
          this.tableData = res.data.data
          this.t = res.data.count
        }
      } else {
        this.getmian()
      }
      this.pageisornot = true
    },
    async addsave() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.post('/replay/replay', {
            company: this.form1.company,
            city: this.form1.city,
            way: this.form1.way,
            time: this.form1.time,
            name: this.form1.name
          })
          if (res.status == 201) {
            this.$message.success('添加成功')
            this.getmian()
          }
        }
      })
    },
    clear() {
      this.getmian()
    },
    del() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        var res = await this.http.delete(`/replay/replay/${row.id}`)
        if (res.data.code === 200) {
          this.getcate()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '没有权限!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    upd(row) {
      this.updlogFormVisible = true
      this.form.id = row.id
      this.form.name = row.name
      this.form.company = row.company
      this.form.city = row.city
      this.form.way = row.way
      this.form.time = row.time,
      this.form.progress=row.progress
    },
    async updsave() {
      var res = await this.http.patch(`/replay/replay/${this.form.id}`, {
        name: this.form.name,
        company: this.form.company,
        city: this.form.city,
        way: this.form.way,
        time: this.form.time,
        progress:this.form.progress
      })
      if (res.status === 200) {
        this.updlogFormVisible = false
        this.$message.success('修改成功')
        this.getmian()
      }
    },
    // weitong(){
    //   this.$router.push('/shenheweitong')
    // },
    async change(){
      console.log(this.status)
      if(this.status==1){
        this.getmian()
      }else if(this.status==2){

          var res = await this.http.get('/replay/replay', {
            params: {
              status:2,
              page: this.page,
              size: this.size
            }
          })

          if (res.status === 200) {
            this.tableData = res.data.data
            this.t = res.data.count
          }
      }
    },
  }
}
</script>
<style  scoped>
    .dingbu .el-input{
      width: 200px;
      margin-left: 7px;
    }
    .el-select{
      margin-left: 7px;
    }
    .dingbu{
      display: flex;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 2px solid ghostwhite;
    }
    .ti{
      float: right;
      margin-right: 10px;
    }
    .el-table{
      margin-top: 15px;
    }
    .el-table .el-button{
      background: 0;
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
      border:0;
    }
    .blue{
      color: #3175fb;
    }

    .red{
      color: red;
    }
    .el-pagination{
      margin-top: 20px;
      text-align: center;
    }
    .qred{
      color: #f6caca;
    }
    .el-dialog .el-input{
      width: 300px;
    }
</style>
